<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  </head>
  <body>
    <div id="app"></div>
    <button id="btn">点我一下</button>
    <script src="./kkb.js"></script>
    <script>
      const root = document.getElementById("app");
      const btn = document.getElementById("btn");
      const obj = {
        name: "kkb",
        age: 1,
      };
      //定义响应式对象
      const recObj = reactive(obj);
      const double = computed(() => recObj.age * 2);
      //只操作js对象，引起dom变化
      btn.addEventListener(
        "click",
        () => {
          recObj.age += 1;
        },
        false
      );
      effect(() => {
        console.log("每次点击一下，执行一下");
        //数据变了，响应式执行这里的代码
        //fn会包装一层格式，方便判断computed,effect
        root.innerHTML = `<h2>${recObj.name}今年${recObj.age}岁了，乘以${double.value}</h2>`;
      });
    </script>
  </body>
</html>
